前情提要

隨著最近越看越多網頁程式碼，就看到越來越多種CSS觀念與技巧，包含昨天的BEM命名以及今天要介紹的CSS選擇器，雖然這應該是很早就要介紹的，但是後來才接觸到複合選擇器，想說認識完整一點再開始記錄，也許以後會很常用到

選擇器定義

CSS選擇器用來選擇和改變 HTML 文檔中元素的樣式。不同的選擇器提供不同方法來選擇單個或多個元素，並對其進行樣式應用

常見選擇器

1. 元素選擇器
   元素選擇器直接選擇 HTML 標籤，並應用樣式

p {
  color: blue;
}

這段代碼將所有 元素的文字顏色設置為藍色

2. 類別選擇器
   類別選擇器使用元素的 class 屬性來選擇元素，必須在選擇器前加一個「.」

.intro {
  font-size: 16px;
}

此處所有擁有 class="intro" 的元素會設定字級16px

3. ID 選擇器
   ID 選擇器使用元素的 id 屬性來選擇元素，必須在選擇器前加一個「#」

#main-title {
  font-weight: bold;
}

這段代碼將 ID 為 main-title 的元素加粗。

4. 群組選擇器
   群組選擇器用來同時選擇多個元素並應用相同樣式，選擇器之間使用逗號隔開

h1, h2, h3 {
  margin-bottom: 10px;
}

此處 h1、h2 和 h3 元素都會有相同的底部邊距

5. 後代選擇器
   後代選擇器選擇某個元素內部的所有指定元素，使用空格來分隔

div p {
  color: red;
}

這將會選擇所有位於 div 內部的 p 元素，並將它們的文字顏色設為紅色

6. 子選擇器
   子選擇器只選擇父元素的直接子元素，使用「>」分隔

div > p {
  color: green;
}

這段代碼只會選擇 div 下一層的 p 元素，並將其文字設為綠色

7. 相鄰兄弟選擇器
   相鄰兄弟選擇器選擇緊接著某個元素之後的兄弟元素，使用「+」分隔

h1 + p {
  font-style: italic;
}

這段代碼將緊接著 h1 之後的 p 元素設置為斜體

8. 一般兄弟選擇器
   一般兄弟選擇器選擇屬於同一父級元素下、位於 div 之後的所有 p 元素，但不要求是直接兄弟元素

div ~ p{
  color:orange;
}

這段代碼將 div 元素之後的所有兄弟 p 元素的文字顏色設為橘色

9. 通用選擇器
   通用選擇器選擇文檔中的所有元素，使用「*」

* {
  margin: 0;
  padding: 0;
}

這段代碼會將所有元素的外邊距和內邊距設為 0

10. 屬性選擇器
    屬性選擇器選擇具有特定屬性的元素

input[type="text"] {
  border: 1px solid black;
}

這會選擇所有 type="text" 的 input 元素，並應用邊框樣式。

11. 偽類選擇器
    偽類選擇器用來選擇元素的某個特殊狀態，如 :hover、:focus、:first-child 等

a:hover {
  color: orange;
}

這段代碼將滑鼠懸停在鏈接（）上的顏色變為橘色

CSS覆蓋權重

CSS具有繼承與覆蓋的功能，可以透過撰寫相同屬性來蓋掉之前的效果，至於為什麼會被蓋掉就是牽涉到選擇器權重，權重相同的情況下後面寫的CSS會蓋掉前面的，而權重對應如下

• HTML標籤(div)：1分
• Class標籤(.example)：10分
• ID標籤(#example)：100分
• 直接寫在標籤裡面(style="")：1000分
• 在CSS裡寫！important：10000分

CSS選擇器參考文章
https://selflearningsuccess.com/css-combinators/